<template>
  <div class="replay-list">
    <van-nav-bar
      :title="currentcomment.reply_count + '条回复'"
      left-arrow
      @click-left="$emit('closeReplay')"
    />

    <!-- 当前评论 -->
    <CommentItem
      :showLabel="false"
      :obj="currentcomment"
      @likeCli="$emit('likeCli', currentcomment.com_id)"
    />

    <!-- 评论回复 -->
    <CommentList
      :showLabel="false"
      type="c"
      :artId="currentcomment.com_id"
      :list="replayList"
      @likeCli="likeCli"
      @addCommentList="addCommentList"
      @tranData="total = $event"
    />

    <!-- 添加评论组件 -->
    <div class="replay">
      <van-button type="primary" @click="addCommentshow = true"
        >发表</van-button
      >
    </div>

    <!-- 添加评论弹层 -->
    <van-popup v-model="addCommentshow" position="bottom">
      <AddComment
        :target="currentcomment.com_id"
        :artId="artId"
        @addComment="addComment"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentList from './commend-list.vue'
import CommentItem from '@/components/comment-item.vue'
import AddComment from './add-comment.vue'
export default {
  name: 'ReplayList',
  props: {
    // 当前评论
    currentcomment: {
      type: Object,
      required: true
    },
    // 文章id
    artId: {
      type: String,
      required: true
    }
  },
  components: { CommentItem, CommentList, AddComment },
  data () {
    return {
      replayList: [],
      addCommentshow: false,
      total: 0
    }
  },
  methods: {
    likeCli (id) {
      this.$emit('likeCli', id)
    },
    addCommentList (arr) {
      this.replayList.push(...arr)
    },
    addComment (obj) {
      this.replayList.unshift(obj)
      this.addCommentshow = false
      // 改变评论数量
      this.$emit('chnageCommmentNum', this.currentcomment.com_id)
    }
  }
}
</script>

<style scoped lang="scss">
.replay {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
}
</style>
